<template>
    <vue-form
        v-model="formData"
        @change="handleChange"
        :ui-schema="uiSchema"
        :schema="schemaObject"
    >
    </vue-form>
    <json-editor
        v-model="code"
    >
    </json-editor>
    <slot></slot>
</template>

<script setup>
import { onMounted, reactive, ref,watch  } from 'vue';
const props = defineProps({
    schema: String
})
let schemaObject = reactive({...JSON.parse(props.schema)});
let formData = reactive({});
let code = ref("")

watch(code, async (newObj, oldObj) => {
    formData = JSON.parse(code.value)
})

function handleChange( newObj, oldObj ) {
    code.value = JSON.stringify(formData,null,2)
}
const uiSchema = reactive( {
    bio: {
        'ui:options': {
            placeholder: '请输入你的签名',
            type: 'textarea',
            rows: 1
        }
    }
})


</script>